<template>
    <div class="container">
        <p class="tips"><i class="point-icon"></i><span>展示当前的用户实时搜索及搜索结果数量（只展示有效搜索）</span></p>
        <div>
            <span class="search-text" v-for="(item, index) in 100" :key="index">
                {{searchList.name}}
                <span>({{searchList.value}})</span>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchList: {
                name: '城市夜景开车',
                value: 100
            }
        }
    }
}
</script>
<style scoped>
    .container {
        width: 1180px;
        padding: 10px;
        height: 100%;
        margin: 0 auto;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .tips {
        padding: 20px 0 30px 0;
        font-size: 14px;
    }
    .point-icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #1bd8b8;
        margin-right: 5px;
    }
    .search-text {
        color: #555;
        margin: 0 10px 20px 0;
        display: inline-block;
    }
    .search-text span {
        color: #9aafbd;
    }
</style>